// 收费明细
<template>
  <div class="contractDetails">
    <div class="card-box">
      <div class="card-title">合同费用汇总</div>
      <el-form ref="form" class="form-wrap" size="small">
        <el-form-item label="合同总租金" prop="endType">
          <span>{{contractPayableTotal}}</span>
        </el-form-item>
        <el-form-item label="月租金" prop="backDate">
          <span>{{rentAmount}}</span>
        </el-form-item>
        <el-form-item label="合同租期" prop="backPerson">
          <span>{{startDate}}至{{endDate}}</span>
        </el-form-item>
      </el-form>
    </div>
    <div class="card-title">合同费用明细</div>
    <el-table :data="receivableFees" style="width: 100%">
      <el-table-column prop="costMonth" :formatter="monthFommater" label="所属月份" width="180" />

      <el-table-column prop="chargeProjectName" label="收费项目" width="180" />

      <el-table-column prop="costPeriodStart" label="开始日期" width="180" />

      <el-table-column prop="costPeriodEnd" label="结束日期" width="180" />

      <el-table-column prop="payableDate" label="应付日期" width="180" />

      <el-table-column prop="payableMoneyOld" label="合同应付金额" width="180" />

      <el-table-column prop="adjustmentAmount" label="调整金额" width="180" />

      <el-table-column prop="payableMoney" label="应付金额" width="180" />
    </el-table>
  </div>
</template>

<script>
import { getGenerateFeeObj } from '@/views/wy-lessor/rentalSociety/api/contract.js'
import { fetchList } from '@/views/wy-lessor/finance/api/lessor-payable.js'

export default {
  name: 'contractDetails',
  data () {
    return {
      //合同明细数据
      receivableFees: [],
      //选中的合同明细项目
      // multipleSelection: []
      contractPayableTotal: 0,
      rentAmount: 0,
      startDate: '',
      endDate: '',
    }
  },
  methods: {
    //加载费用信息
    preViewFee (contractId, contract) {
      //alert("费用预览");
      let lessorContractId = contractId //this.$route.query.id;
      //let hasfees=false;
      //this.receivableFees=[];

      //如果已核算过，则调用真实费用
      //已核算 执行中 已终止
      let contractStatus = null
      if (contract) {
        contractStatus = contract.status
        this.rentAmount = contract.rentAmount
        this.startDate = contract.startDate
        this.endDate = contract.endDate
      }
      if (
        contractStatus == '13' ||
        contractStatus == '03' ||
        contractStatus == '04' ||
        contractStatus == '06'
      ) {
        fetchList({ lessorContractId: lessorContractId, size: 200 }).then(
          (response) => {
            if (response.data.code == 0) {
              //if(response.data.data.length>0) {
              this.receivableFees = response.data.data.records

              //总租金求和
              this.contractPayableTotal = 0
              for (let i = 0; i < this.receivableFees.length; i++) {
                this.contractPayableTotal += this.receivableFees[
                  i
                ].payableMoneyOld
              }
              //alert(JSON.stringify(response.data.data))
              //hasfees = true;
              //}
            } else {
              this.$alert('加载应付款服务端服务错误' + response.code)
            }
          }
        )
      } else {
        //没有的话，则生成预览费用
        getGenerateFeeObj(lessorContractId).then((response) => {
          //alert(response.data)
          if (response.data.code == 0) {
            this.receivableFees = response.data.data
            //总租金求和
            this.contractPayableTotal = 0
            for (let i = 0; i < this.receivableFees.length; i++) {
              this.contractPayableTotal += this.receivableFees[
                i
              ].payableMoneyOld
            }
          } else {
            this.$alert('加载费用服务端服务错误' + response.code)
          }
        })
      }
    },

    monthFommater (row, column) {
      return row.costMonth.toString().substr(0, 7)
    },

    //toggleSelection(rows) {
    //    if (rows) {
    //   rows.forEach(row => {
    //       this.$refs.multipleTable.toggleRowSelection(row);
    //   });
    //   } else {
    //   this.$refs.multipleTable.clearSelection();
    //   }
    //},
    //handleSelectionChange(val) {
    //    this.multipleSelection = val;
    //},
  },
}
</script>

<style scoped lang="scss">
@include formWrap();
</style>

<style lang="scss" scoped>
.contractDetails {
  .title {
    text-align: center;
    font-size: 20px;
    margin: 40px 0 30px;
  }
  /deep/ .el-table {
    .el-table__header {
      border-color: #dee2e6;
    }
    thead th {
      background-color: #fafafa;
      color: #333;
    }
    td {
      padding: 10px 0;
    }
  }
}
</style>
